<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>短信项目视图</title>
<link href="../../layui/css/layui.css" rel="stylesheet" type="text/css">
<link href="../../css/style.css" rel="stylesheet" type="text/css">
<script src="../../layui/layui.js"></script>
<link href="../../layui/css/iconfont/iconfont.css" rel="stylesheet"
	type="text/css">
<script src="../../layui/css/iconfont/iconfont.js"></script>
<script src="../../js/jquery-1.8.3.js"></script>
<script src="../../js/util.js"></script>
<script type="text/javascript">


	layui.use([ 'layer', 'table', 'form', 'jquery', 'element', 'echarts' ], function(exports) {
		var table = layui.table;
		var echarts = layui.echarts;
		var layer = layui.layer;
		var form = layui.form;
		var $ = layui.$;
		console.log(echarts);
		var myChart = echarts.init(document.getElementById('main'));
		var option = {
			tooltip : {
				trigger : 'axis',
				 //show: false,
				axisPointer : { // 坐标轴指示器，坐标轴触发有效
					type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			legend : {
				data : [ '在发项目', '暂停项目', '停止项目' ]
			},
			grid : {
				left : '3%',
				right : '4%',
				bottom : '3%',
				containLabel : true
			},
			yAxis : {
				type : 'value'
			},
			xAxis : {
				type : 'category',
				axisLabel: {
			      interval: 0,    //制文字产生间隔
			         rotate: 45,     //文字逆时针旋转45°      
			        },
				data : []
			},
			series : [

				{
					name : '在发项目',
					type : 'bar',
					stack : '总量',
					itemStyle : {
						normal : {
							color : '#65B828',
						}
					},
					label : {
						normal : {
							show : true,
							position : 'insideRight',
							   formatter: function (params) {
                                    if (params.value > 0) {
                                        return params.value;
                                    } else {
                                        return '';
                                    }
                                },
						}
					},
					data : []
				},
				{
					name : '暂停项目',
					type : 'bar',
					stack : '总量',
					itemStyle : {
						normal : {
							color : '#007AFF',
						}
					},
					label : {
						normal : {
							show : true,
							position : 'insideRight',
							   formatter: function (params) {
                                    if (params.value > 0) {
                                        return params.value;
                                    } else {
                                        return '';
                                    }
                                },
						}
					},
					data : []
				},
				{
					name : '停止项目',
					type : 'bar',
					stack : '总量',
					itemStyle : {
						normal : {
							color : '#F5A623',
						}
					},
					label : {
						normal : {
							show : true,
							position : 'insideRight',
							   formatter: function (params) {
                                    if (params.value > 0) {
                                        return params.value;
                                    } else {
                                        return '';
                                    }
                                },
						}
					},
					data : []
				}
			]
		};
		;
		myChart.setOption(option);
		$("#download").on('click', function() {
			location.href = '/smsMgrView/download?flag=city';
		});

		table.render({
			elem : "#table", //表格id
			id : "modelReload", //id
			url : '/smsMgrView/findview',
			method : 'post',
			where : {
				flag : 'city'
			},
			count : "count",
			limit : 10,
			limits : [ 10, 20, 30, 40, 50 ],
			layout : [ 'prev', 'page', 'next' ],
			prev : "上一页",
			next : "下一页",
			cols : [ [ //表头
				{
					field : 'cityName',
					width : '25%',
					title : '地市'
				}
				, {
					field : 'runNum',
					width : '25%',
					title : '在发项目数'
				}
				, {
					field : 'waitNum',
					width : '25%',
					title : '暂停项目数'
				}
				, {
					field : 'stopNum',
					width : '25%',
					title : '停止项目数',
					totalRow : true
				}
			] ],
			done : function(res, curr, count) {
				myChart.showLoading({
					text : '正在努力的读取数据中...'
				});
				console.log("res----"+res);
				console.log("curr----"+curr);
				console.log("count----"+count);
				var datas = res.data;
				var cityNames = [];
				var stopNums = [];
				var runNums = [];
				var waitNums = [];
				for (var i = 0; i < datas.length - 1; i++) {

					cityNames.push(datas[i].cityName);
					stopNums.push(datas[i].stopNum);
					runNums.push(datas[i].runNum);
					waitNums.push(datas[i].waitNum);
				}
				console.log(cityNames);
				console.log(stopNums);
				console.log(runNums);
				console.log(waitNums);
				myChart.setOption({
					xAxis : {
						data : cityNames
					},
					series : [
						{
							name : '在发项目',
							data : runNums
						}, {
							name : '暂停项目',
							data : waitNums
						},
						{
							// 根据名字对应到相应的系列
							name : '停止项目',
							data : stopNums
						} ]
				});
				myChart.hideLoading();
			}
		});


	});
</script>
<body>
	<div class="layui-content-body">
		<div class="scroll-box">
			<div class="breadcrumb-box">
				<span class="layui-breadcrumb" lay-separator="|"> <a href="">首页&nbsp;</a>
					<a href=""> &nbsp;报表管理 </a> <a href=""> &nbsp;短信项目视图 </a>
				</span>
			</div>
			<div class="content-box">
				<div class="form-select-box">
					<div class="layui-form layui-form-pane" id="form">
						<div class="layui-form-item">
							<div class="layui-block" pane="">
								<label class="layui-form-label" style="width:120px">统计方式</label>
								<div class="layui-input-block">
									<a href="smsViewManage.html"> <input type="radio"
										title="按地市" name="way" value="smsViewManage" checked=""></a>
									<a href="smsViewManageCounty.html"> <input type="radio"
										title="按区县" name="way" value="smsViewManageCounty"></a>
									<!-- <button class="layui-btn layui-btn-normal" id="download">查&nbsp;询</button> -->
									<button class="layui-btn layui-btn-normal" id="download">导&nbsp;出</button>
								</div>
								<!--表格-->
								<div class="layui-table" style="width:50%;float:left;">
									<table id="table" lay-filter="table"></table>
								</div>
								<div class="layui-table"
									style="width:50%;float:left;width: 600px;height:500px"
									id="main"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>